<template>
  
    <div class="white-bg commonBoxmp">
    <el-scrollbar class="HeightAuto">
        <div id="vditor" />
    </el-scrollbar>
  </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import Vditor from 'vditor';
  import 'vditor/dist/index.css';
  
  const vditor = ref<Vditor | null>(null);
  
  onMounted(() => {
    vditor.value = new Vditor('vditor', {
      after: () => {
        vditor.value!.setValue('Vue Composition API + Vditor + TypeScript Minimal Example');
      },
    });
  });
  </script>
  
  <style>
#vditor{
    height: 500px;
}
</style>
  